<template>
  <div>
    <el-card class="card">
      <el-table :data="myCourses" style="width: 100%">
        <el-table-column prop="courseName" label="课程名"  />
        <el-table-column prop="teacher" label="授课教师"  />
        <el-table-column prop="credit" label="学分" />
        <el-table-column prop="startWeek" label="开始周" />
        <el-table-column prop="endWeek" label="结束周" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button plain type="info" @click="checkMyCourse(scope.row.id)" size="small">查看成绩</el-button>
            <el-button plain type="danger" size="small" @click="cancelCourse(scope.row.id)">退课</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref,h} from 'vue'
import {GET_USER} from "@/utils/userInfo";
import { getMyCourse } from "@/api/student";
import {StuCourse} from "@/api/student/type";
import { cancelMyCourse } from "@/api/student";
import { ElMessage } from 'element-plus'
import { ElNotification } from 'element-plus'
import { getMyScore } from "@/api/student";

const myCourses = ref<StuCourse[]>()

const fetchData = async() => {
  try {
    const { data } = await getMyCourse(GET_USER().id)
    myCourses.value = data
  } catch (error) {
    await Promise.reject(error)
  }
}
onMounted(async() => {
   await fetchData()
})
const cancelCourse = async(id:number) => {
  try {
    const { data } = await cancelMyCourse(id)
    ElMessage({
      message: data,
      type: 'info',
    })
  } catch (error) {
    await Promise.reject(error)
  }
  await fetchData()
}
const checkMyCourse = async(id:number) => {
  try {
    const { data } = await getMyScore(id)
    ElNotification({
      title: '成绩报告',
      message: h('i', { style: 'color: teal' }, data),
    })
  } catch (error) {
    await Promise.reject(error)
  }
}
</script>

<style scoped>
.empty {
  margin-top: 10%;
}
.card {
  padding:20px;
  margin: 0 auto;
  margin-top: 5%;
  width:70%;
  min-height:600px;
}
</style>
